<template>
  <div>
    <el-table
      :data="roleObjs"
      stripe
      style="width: 100%">
      <el-table-column
        prop="roleId"
        label="角色编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="roleDescription"
        label="角色描述"
        width="250"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleDetail(scope.$index, scope.row)">详情
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleModify(scope.$index, scope.row)">修改
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="button-box">
    <el-button type="success" round class="button1" @click="gotoEntry">新增</el-button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    data() {
      return{
        roleObjs:[]
      }
    },
    methods: {
      handleDetail(index, row) {
        this.$router.push({name: 'detail',params:{roleObj: row}})
      },
      handleModify(index, row){
        this.$router.push({name: 'modify',params:{roleObj: row}})
      },
      handleDelete(index, row) {
        this.$router.push({ name: 'confirm', params: { roleObj: row,operation: '删除' }})
      },
      gotoEntry(){
        this.$router.push('/roleManagement/entry')
      }
    },
    mounted(){
      axios.get('/api/role/getAll').then(res=>{
        if (res.data.status==='1'){
          this.roleObjs=res.data.result;
        }
      })
    }
  }
</script>

<style scoped>
  .button-box{
    margin: 20px auto;
    width: 50%;

  }
.button1{
  width: 100%;
}
</style>
